<template>
  <div class="outer">
    <div class="top-title">
      <span>{{localQuestion.title}}</span>
      <el-tag type="danger" v-if="localQuestion.must">(必做)</el-tag>
    </div>
    <div class="question">{{localQuestion.description}}</div>
    <el-rate v-model="localModel" :max="localQuestion.max" @change="handleChange"></el-rate>
  </div>
</template>

<script>
export default {
  name: "QitemRate",
  props: {
    question: {
      type: Object,
      default: function() {
        return {
          key: 1,
          order: 1,
          type: "rate",
          must: true,
          title: "评分题",
          description: "默认评分题",
          min: 0,
          max: 5
        };
      }
    }
  },
  data() {
    return {
      localQuestion: this.question,
      localModel: 0
    };
  },
  methods: {
    checkAnswer() {
      if (this.localQuestion.must == false) return true;
      return this.localModel != "";
    },
    handleChange(value) {
      this.$emit("change", { value, type: "rate" });
    }
  },

  mounted() {
    console.log(this.question);
    this.localModel = this.question.min;
  }
};
</script>

<style scoped>
.el-tag.el-tag--danger {
  background-color: transparent;
  border: none;
  text-align: left;
}
.outer {
  width: 100%;
  /* background-color: aqua; */
}
.top-title {
  width: 100%;
  line-height: 32px;
  display: inline-block;
  text-align: left;
  padding: 0 0 0px 10px;
  font-weight: 700;
  box-sizing: border-box;
}
.question {
  width: 100%;
  /* background-color: turquoise; */
  text-align: left;
  padding-left: 10px;
  margin: 10px auto;
  margin-top: 3px;
  box-sizing: border-box;
}
.el-input-number {
  /* background-color: red; */
  /* margin: auto 1000px; */
  margin-left: 10px;
  margin-bottom: 13px;
  margin-top: 13px;
}
</style>